import React, { Component } from "react";
import Header from "./common/header";
import Footer from "./common/footer";
import 'antd/dist/antd.css'
import 'antd-mobile/dist/antd-mobile.css'
import { GlobalStyle } from "./style.js";
import { GlobalFont } from "./static/font/globalFont";
import store from "./store";
import { Provider } from "react-redux";
import { BrowserRouter, Link, Route } from "react-router-dom";
import routes from './route';
import { CacheSwitch, CacheRoute } from 'react-cache-router';
class App extends Component {
  selectRoute(route, key) {
    if (!route.meta.caches) {
      return <Route
        key={key}
        exact={route.exact}
        path={route.path}
        render={props => {
          return (
            <>
              <Header {...props} title={route.meta.title} show={route.meta.show} />
              <route.component {...props} routes={route.routes} />
              {route.meta.footerShow ? <Footer  {...props} /> : ""}
            </>
          )
        }}
      />
    } else {
      return <CacheRoute
        key={key}
        exact={route.exact}
        path={route.path}
        render={props => {
          return (
            <>
              <Header {...props} title={route.meta.title} show={route.meta.show} />
              <route.component {...props} routes={route.routes} />
              {route.meta.footerShow ? <Footer  {...props} /> : ""}
            </>
          )
        }}
      />
    }
  }
  render() {
    return (
      <div className="App" >
        <Provider store={store}>
          <GlobalStyle />
          <GlobalFont />
          <BrowserRouter>
            <Link to='/detail/121'>222</Link>
            {routes.map((route, key) => {
              return <Link key={key} to={route.path}>{route.meta.title}</Link>
            })}
            <CacheSwitch>
              {routes.map((route, key) => {
               return this.selectRoute(route, key)
              })}
            </CacheSwitch>
          </BrowserRouter>
        </Provider>
      </div>
    );
  }
}
export default App;
